<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>610书窝 - 小程序</title>
  <link rel="stylesheet" href="./assets/css/style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600&family=Work+Sans:wght@400;500;700&display=swap"
    rel="stylesheet">
</head>

<body>
  <!-- 头部导航 -->
  <header class="mp-header">
    <div class="mp-logo">
      <img src="../assets/images/logo.svg" alt="610书窝">
    </div>
    <h1 class="mp-title">610书窝</h1>
  </header>

  <!-- 主体内容 -->
  <main>
    <!-- 轮播图 -->
    <section class="mp-banner">
      <div class="mp-carousel">
        <div class="mp-carousel-slides">
          <div class="mp-carousel-slide active">
            <img src="../assets/images/slide1.jpg" alt="精选书籍1">
          </div>
          <div class="mp-carousel-slide">
            <img src="../assets/images/slide2.jpg" alt="精选书籍2">
          </div>
          <div class="mp-carousel-slide">
            <img src="../assets/images/slide3.jpg" alt="精选书籍3">
          </div>
        </div>

        <div class="mp-carousel-indicators">
          <span class="mp-indicator active" data-slide="0"></span>
          <span class="mp-indicator" data-slide="1"></span>
          <span class="mp-indicator" data-slide="2"></span>
        </div>
      </div>

      <div class="mp-banner-text">
        <h2>获取你的新书收藏</h2>
        <p>欢迎来到610的小窝呀~~~</p>
        <button class="mp-btn">探索更多</button>
      </div>
    </section>

    <!-- 服务特点 -->
    <section class="mp-features">
      <div class="mp-feature-item">
        <div class="mp-feature-icon">
          <i class="fas fa-truck"></i>
        </div>
        <div class="mp-feature-text">
          <h3>免费送货</h3>
          <p>订单满$100</p>
        </div>
      </div>

      <div class="mp-feature-item">
        <div class="mp-feature-icon">
          <i class="fas fa-lock"></i>
        </div>
        <div class="mp-feature-text">
          <h3>安全支付</h3>
          <p>100% 安全支付</p>
        </div>
      </div>

      <div class="mp-feature-item">
        <div class="mp-feature-icon">
          <i class="fas fa-tag"></i>
        </div>
        <div class="mp-feature-text">
          <h3>最优价格</h3>
          <p>保证低价</p>
        </div>
      </div>

      <div class="mp-feature-item">
        <div class="mp-feature-icon">
          <i class="fas fa-undo"></i>
        </div>
        <div class="mp-feature-text">
          <h3>轻松退货</h3>
          <p>3天内退货</p>
        </div>
      </div>
    </section>

    <!-- 精选书籍 -->
    <section class="mp-featured">
      <h2 class="mp-section-title">精选系列</h2>
      <p class="mp-section-text">610精心挑选~</p>

      <div class="mp-books">
        <div class="mp-book-card">
          <div class="mp-book-badge">新品</div>
          <div class="mp-book-img">
            <img src="../assets/images/book1.jpg" alt="概率论与数理统计">
          </div>
          <div class="mp-book-info">
            <h3>概率论与数理统计</h3>
            <p class="mp-book-price">$2.00</p>
            <div class="mp-rating">
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star-half-alt"></i>
            </div>
          </div>
        </div>

        <div class="mp-book-card">
          <div class="mp-book-img">
            <img src="../assets/images/book2.jpg" alt="数据库原理与应用">
          </div>
          <div class="mp-book-info">
            <h3>数据库原理与应用</h3>
            <p class="mp-book-price">$3.00</p>
            <div class="mp-rating">
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="far fa-star"></i>
            </div>
          </div>
        </div>
      </div>

      <button class="mp-more-btn">查看更多</button>
    </section>

    <!-- 特别优惠 -->
    <section class="mp-offer">
      <h2>所有书籍现价五折！</h2>
      <p>勿失良机！</p>

      <div class="mp-countdown">
        <div class="mp-time-box">
          <span class="mp-time">15</span>
          <span class="mp-label">天</span>
        </div>
        <div class="mp-time-box">
          <span class="mp-time">21</span>
          <span class="mp-label">小时</span>
        </div>
        <div class="mp-time-box">
          <span class="mp-time">18</span>
          <span class="mp-label">分钟</span>
        </div>
        <div class="mp-time-box">
          <span class="mp-time">14</span>
          <span class="mp-label">秒</span>
        </div>
      </div>

      <button class="mp-btn">立即抢购</button>
    </section>
  </main>

  <!-- 底部导航 -->
  <footer class="mp-tabbar">
    <a href="./index.html" class="mp-tab-item active">
      <i class="fas fa-home"></i>
      <span>首页</span>
    </a>
    <a href="./pages/shop/index.html" class="mp-tab-item">
      <i class="fas fa-shopping-bag"></i>
      <span>商店</span>
    </a>
    <a href="./pages/blog/index.html" class="mp-tab-item">
      <i class="fas fa-book-open"></i>
      <span>博客</span>
    </a>
    <a href="./pages/about/index.html" class="mp-tab-item">
      <i class="fas fa-info-circle"></i>
      <span>关于</span>
    </a>
    <a href="./pages/member/index.html" class="mp-tab-item">
      <i class="fas fa-user"></i>
      <span>我的</span>
    </a>
  </footer>

  <script src="./assets/js/script.js"></script>
</body>

</html>